<template>
  <div>
      <van-search
  v-model="value"
  placeholder="请输入搜索关键词"
  input-align="center"
  @keydown.enter="Search()"
  @input="ajaxSearchSuggest()"
/>
<div id="sug" ref="ipt">
<router-link class="ele" :to="'searchDetal/' + eleSuggest.first" v-for="(eleSuggest,index) in dataList" :key="eleSuggest.id">
  <div>
    <span style="width: 44px;display: block;float: left;" ref="coL">{{index+1}}{{col(index+1)}}</span>
    {{eleSuggest.name?eleSuggest.name + '  ' +eleSuggest.artists[0].name:eleSuggest.first}}</div>
  
</router-link>
</div>
  </div>
</template>

<script>
import axios from 'axios';
// import Vue from "vue";
export default {
  data() {
    return {
      value: '',
      dataList: [],
    }
  },
  mounted() {
    this.ajaxSearchHot();
  },
  methods: {
    col(){
      // if (no < 3)
      //   console.log(this.$refs.coL[0])
      //   console.log(this.$refs.ipt.childNode[0])
      let x = document.querySelectorAll('#sug')[0];
      console.log(x.childNodes)

        // console.log(this.$refs)
      // console.log();
    },
  Search(){
    window.location = 'http://localhost:8080/#/searchDetal/' + this.value
    console.log(111111111);
  },
    ajaxSearchSuggest(){
      if(!this.value)
        return this.dataList = []
            let url = "/api/search/suggest?keywords="+this.value;
            console.log(this.value);
            return axios({
                method: "get",
                timeout: 1000 * 30,
                url: url,
                dataType: "json",
            })
                .then((res) => {
                    this.dataList = res.data.result.songs;
                    // this.dataList = res.data;
                    // this.dataList = res;
                    // console.log(this.dataList);
                    console.log(res);
                    console.log(res.data.result.songs);
                    // console.log(res.data.result);
                    // console.log(res.data.result.songs);
                    // console.log(this.dataList);
                    return res;
                })
                .catch(function (error) {
                    alert("获取失败，请稍后重试");
                    console.log(error);
                });
        },
           ajaxSearchHot(){
            let url = "/api/search/hot";
            return axios({
                method: "get",
                timeout: 1000 * 30,
                url: url,
                dataType: "json",
            })
                .then((res) => {
                    this.dataList = res.data.result.hots;
                    // this.dataList = res.data;
                    // this.dataList = res;
                    console.log(this.dataList);
                    // console.log(res);
                    // console.log(res.data.result.songs);
                    // console.log(res.data.result);
                    // console.log(res.data.result.songs);
                    // console.log(this.dataList);
                    return res;
                })
                .catch(function (error) {
                    alert("获取失败，请稍后重试");
                    console.log(error);
                });
        },          
  },
   

}
</script>

<style scoped lang="less">
.ele {
  padding: 10px;
  /*border: #555555 solid 1px;*/
  border-bottom: #bab8af solid .5px;
  display: block;
}
span:in-range{
  color: #000;
}
#sug {
  background-color: rgba(194, 205, 194, 0.53);
}
.list {
  display: block;
  height: 30px;
  padding: 10px 5px;
}
</style>